<template>
  <div id="questionResult">
    <a-card body-style="height: 100%; background: rgba(255, 255, 255, 1)">
      <template #title>
        运行结果
        <span v-if="data.status">：
          <a-tag :color="getStatusColor(data.status)">
          {{ getStatusText(data.status) }}
        </a-tag>
        </span>
      </template>
      <a-form v-if="resultShow" :model="data" label-align="left" auto-label-width >
        <a-form-item field="message" label="返回消息">
          <a-textarea v-model="data.message" disabled/>
        </a-form-item>
        <a-form-item field="input" label="输入用例">
          <a-input v-model="data.input" disabled/>
        </a-form-item>
        <a-form-item field="output" label="预期输出">
          <a-input v-model="data.output" disabled/>
        </a-form-item>
        <a-form-item field="output" label="实际输出">
          <a-input v-model="data.output" disabled/>
        </a-form-item>

      </a-form>
      <div v-else-if="resultId" style="text-align: center;">
        <a-spin  dot />
      </div>
      <a-empty v-else>
        暂无提交
      </a-empty>
    </a-card>
  </div>
</template>

<script setup>
import {computed, defineProps, onMounted, reactive, ref} from "vue";
import ProblemUtils from "../../utils/problem/index.js";
import {ProblemRecordControllerService} from "../../apis/index.js";
import {ProblemSubmitStatusEnum} from "../../common/enums/problem.js";

const emits = defineEmits(["accepted"]);
const props = defineProps({
  resultId: {
    type: String,
  }
})
const resultShow = ref(false);
const data = ref({});
let getResultInterval = 0;

if (props.resultId) {
  getResultInterval = setInterval(async () => {
    const ret = await ProblemRecordControllerService.get(props.resultId);
    if (ret.code === 200) {
      resultShow.value = true;
      data.value = ret.data;
      if (ret.data.status !== ProblemSubmitStatusEnum.JUDGING.code && ret.data.status !== ProblemSubmitStatusEnum.PENDING.code) {
        clearInterval(getResultInterval);
      }
      if (ret.data.status === ProblemSubmitStatusEnum.ACCEPTED.code) {
        emits("accepted");
      }
    }
  }, 1000);
}

const getStatusColor = computed(() => (code) => ProblemUtils.getProblemSubmitStatusEnum(code).color);
const getStatusText = computed(() => (code) => ProblemUtils.getProblemSubmitStatusEnum(code).text);

onMounted(() => {

})
</script>

<style scoped>

</style>
